<template>
    <div class="home" id="F41"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("F41")).setOption({
                title: {
                    text: "工区能耗",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "14px",
                    },
                },
                color: ["red", "#eee"],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "transparent",
                    borderWidth: 1,
                    textStyle: {
                        // 文字提示样式
                        color: "#fff",
                        fontSize: "12",
                    },
                },
                grid: {
                    top: 50,
                    x: 75,
                    x2: 45,
                    y2: 40,
                },
                // backgroundColor: "rgba(0,0,0,0.2)",
                legend: {
                    data: ["用水", "用电"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "1",
                            "2",
                            "3",
                            "4",
                            "5",
                            "6",
                            "7",
                            "8",
                            "9",
                            "10",
                            "11",
                            "12",
                        ],
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "(万吨)",
                        min: 0,
                        max: 10,
                        interval: 2,
                        splitNumber: 6, //设置坐标轴的分割段数
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: "(万度)",
                        min: 0,
                        max: 700,
                        interval: 100,
                        splitNumber: 6, //设置坐标轴的分割段数
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                    },
                ],

                series: [
                    {
                        name: "用水",
                        type: "line",
                        // yAxisIndex: 1,
                        data: [
                            4.62, 3.17, 2.73, 4.3, 4.74, 8.86, 6.58, 7.53, 7.28,
                        ],
                    },
                    {
                        name: "用电",
                        type: "line",
                        yAxisIndex: 1,
                        data: [424, 405, 420, 396, 464, 587, 647, 623, 484],
                        // symbol: 'none',
                        // smooth: true
                    },
                ],
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    height: 170px;
    // background: rgba(10, 18, 44, .65)
}
</style>
